import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons"
import type { MenuProps } from "antd"
import { createFromIconfontCN } from "@ant-design/icons"

type MenuItem = Required<MenuProps>["items"][number]
const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4667796_hy3muuu5xb9.js", // 将此替换为你的iconfont项目的scriptUrl
})

interface ITopic {
  id: string
  title: string
  type: string
}

import cssTopics from "../cssKnowledge/cssTopics.json"
import reactTopics from "../reactKnowledge/reactTopics.json"

const GenerateMenuItems = (topics: ITopic[]): MenuItem[] => {
  return topics.map((t) => ({
    key: t.id,
    label: t.title,
  }))
}

export const menuData: MenuItem[] = [
  {
    key: "react",
    label: "React",
    icon: <IconFont type="icon-react" />,
    children: GenerateMenuItems(reactTopics.topics),
  },
  {
    key: "css",
    label: "CSS",
    icon: <IconFont type="icon-cssgeshihua" />,
    children: GenerateMenuItems(cssTopics.topics),
  },
]
